<template>
    <view class="content">
        <view class="back-button" @click="toBack">
            <image src="http://img.wisdomtaxi.com/toBack.png" style="width: 100%; height: 100%;"></image>
        </view>
        <map class="order-map" :latitude="startPoint.latitude" :longitude="startPoint.longitude" show-location
            :polyline="polyline" @markertap="markertap" :key="polyline.length + new Date().getTime()"
            :markers="markers">
            <cover-view slot="callout">
                <block v-for="(item,index) in markers" :key="index">
                    <cover-view class="customCallout" :marker-id="item.id">
                        <cover-view class="customCalloutContent">
                            {{item.title}}
                        </cover-view>
                    </cover-view>
                </block>
            </cover-view>
        </map>
        <view class="order-box">
            <view class="search-start" v-if="endPoint.address">
                <view class="custom-style" v-for="item in btnList" :key="item.value"
                    :class="{active:flag === item.value}" @click="selectRouteType(item.value)">
                    {{item.name}}
                </view>
            </view>
            <view class="search-start" v-if="distance || duration">
                <u-icon name="file-text-fill" color="#FFA500" size="17"></u-icon>
                <view class="start-name">
                    距离：{{distance}} 时间：{{duration}}
                </view>
            </view>
            <view class="search-start">
                <u-icon name="map-fill" color="#33a63b" size="17"></u-icon>
                <view class="start-name">
                    您将在 <text style="color: #33a63b">{{startPoint.name | fmtEndAddr}}</text> 上车
                </view>
            </view>
            <view class="search-start" v-if="endPoint.name">
                <u-icon name="map-fill" color="#ee642b" size="17"></u-icon>
                <view class="start-name">
                    {{endPoint.name|fmtEndAddr}}
                </view>
            </view>
            <view class="search-box" @click="openChooseLocation">
                <u-icon name="search" color="#ffa602" size="23"></u-icon>
                <view class="search-placeholder">
                    请选择目的地
                </view>
            </view>
            <view v-if="endPoint.name" @click="submitToDriver" class="send-btn">
                发送给司机
            </view>
        </view>
    </view>
</template>

<script>
    // import uniIcons from "@/components/uni-icons/uni-icons.vue";
    import amapFile from "@/lib/AMapWX_SDK_V1.3.0/amap-wx.130.js";
    export default {
        components: {
            // uniIcons
        },
        data() {
            return {
                markers: [],
                tripInfo: {},
                polyline: [],
                startPoint: {
                    latitude: 26.56045894387685, //纬度
                    longitude: 106.68005128661751, //经度
                    name: '',
                    address: ''
                },
                endPoint: {},
                myAmapFunT: null,
                distance: 0, //距离
                duration: 0, //时间
                flag: 10,
                btnList: [{
                        name: '推荐',
                        value: 10
                    },
                    {
                        name: '躲避拥堵',
                        value: 4
                    },
                    {
                        name: '距离短',
                        value: 2
                    },
                ]
            }
        },
        filters: {
            fmtEndAddr(val) {
                if (val === null || val === '' || val === undefined) {
                    return '未知地址';
                }
                return val;
            },
        },

        onLoad() {
            this.myAmapFunT = new amapFile.AMapWX({
                key: '0f50f19e1fb249273b84164b982c566e'
            })
            this.getCurrentLocation();
        },
        methods: {
      //返回
            toBack() {
                uni.navigateBack({});
            },
            //获取当前定位
            getCurrentLocation() {
                let that = this
                uni.getLocation({
                    type: 'gcj02',
                    success: function(res) {
                        // console.log('当前：' , res);
                        // console.log('当前位置的经度：' + res.longitude);
                        // console.log('当前位置的纬度：' + res.latitude);
                        that.startPoint.longitude = res.longitude;
                        that.startPoint.latitude = res.latitude;

                        that.getAddress(that.startPoint.longitude + ',' + that.startPoint.latitude)
                    }
                });

            },
            // 解析地址
            getAddress(loc) {
                var that = this;
                var myAmapFun = this.myAmapFunT
                if (loc !== null && loc !== '' && loc !== undefined) {
                    myAmapFun.getRegeo({
                        iconPath: 'http://img.wisdomtaxi.com/amap_icon.png',
                        width: '37.5rpx',
                        height: '37.5rpx',
                        location: loc,
                        success: function(data) { //成功回调
                            // console.log('地址解析',data)
                            that.startPoint.name = data[0].name
                            that.startPoint.address = data[0].desc

                            that.initMap()
                        },
                        fail: function(info) { //失败回调
                            console.log(info)
                        },
                    });
                }
            },
            //初始化地图数据
            initMap() {
                this.markers.push({
                    id: 1,
                    latitude: this.startPoint.latitude, //纬度
                    longitude: this.startPoint.longitude, //经度
                    iconPath: '/static/images/home/start.png', //显示的图标
                    rotate: 0, // 旋转度数
                    width: 30, //宽
                    height: 30, //高
                    title: this.startPoint.name, //标注点名
                    // alpha: 0.5, //透明度
                    joinCluster: true,
                    customCallout: {
                        anchorY: 0,
                        anchorX: 0,
                        display: "ALWAYS",
                    },
                }, )

            },
            /**
             *@author ZY
             *@date 2023/1/9
             *@Description:选择位置
             *@param {Object} opt https://uniapp.dcloud.net.cn/api/location/location.html
             *
             opt : {
              latitude  Number  否   目标地纬度
              longitude Number  否   目标地经度
             }
             */
            openChooseLocation(opt) {
                let that = this
                uni.chooseLocation({
                    latitude: opt?.latitude || that.startPoint.latitude,
                    longitude: opt?.longitude || that.startPoint.longitude,
                    success: function(res) {
                        // console.log(res)
                        // console.log('位置名称：' + res.name);
                        // console.log('详细地址：' + res.address);
                        // console.log('纬度：' + res.latitude);
                        // console.log('经度：' + res.longitude);
                        if (!res.name) {
                            return uni.showToast({
                                title: '请重新选择位置',
                                icon: 'none'
                            });
                        }
                        //设置终点
                        that.endPoint = {
                            longitude: res.longitude,
                            latitude: res.latitude,
                            name: res.name,
                            address: res.address
                        }
                        //设置终点标记
                        that.markers[1] = {
                            id: 2,
                            latitude: res.latitude, //纬度
                            longitude: res.longitude, //经度
                            iconPath: '/static/images/home/endd.png', //显示的图标
                            rotate: 0, // 旋转度数
                            width: 30, //宽
                            height: 30, //高
                            title: res.name, //标注点名
                            // alpha: 0.5, //透明度
                            joinCluster: true,
                            customCallout: {
                                anchorY: 0,
                                anchorX: 0,
                                display: "ALWAYS"
                            },
                        }

                        let start = that.startPoint.longitude + ',' + that.startPoint.latitude
                        let end = res.longitude + ',' + res.latitude
                        //每次选取位置完成后都会默认 10 策略
                        that.flag = 10
                        //生成规划路线
                        that.getPlanningRoute(start, end, 10)
                    },
                    fail: function(info) { //失败回调
                        console.log('调取失败')
                        console.log(info)
                    },

                })
            },
            // 按钮选择策略
            selectRouteType(idx) {
                this.flag = idx
                let start = this.startPoint.longitude + ',' + this.startPoint.latitude
                let end = this.endPoint.longitude + ',' + this.endPoint.latitude
                this.getPlanningRoute(start, end, idx)
            },
            /**
             *@author ZY
             *@date 2023/1/9
             *@Description:生成规划路线
             *@param {string} start 开始位置
             *@param {string} end 结束位置
             *@param {number} strategy 10 默认多策略 策略 https://lbs.amap.com/api/webservice/guide/api/direction#driving
             *
             10，返回结果会躲避拥堵，路程较短，尽量缩短时间，与高德地图的默认策略也就是不进行任何勾选一致
             * 4，躲避拥堵，但是可能会存在绕路的情况，耗时可能较长
             2，距离优先，仅走距离最短的路线，但是可能存在穿越小路/小区的情况
             */
            getPlanningRoute(start, end, strategy = 10) {
                let that = this
                uni.showLoading({
                    title: '加载中'
                });
                that.myAmapFunT.getDrivingRoute({
                    origin: start,
                    destination: end,
                    strategy: strategy, //备选方案
                    success: function(data) {
                        // console.log('所有路径',data)
                        if (data.paths && data.paths[0] && data.paths[0].steps) {
                            // 默认 10 会 对返回多条路径的方案  按照时间短的
                            let goodRouter = data.paths.sort((a, b) => {
                                return a.duration - b.duration
                            })[0]

                            that.distance = (goodRouter.distance * 0.001).toFixed(2) + '公里'
                            that.duration = '大约' + (goodRouter.duration / 60).toFixed(2) + '分钟'

                            let steps = goodRouter.steps
                            let points = []
                            for (var i = 0; i < steps.length; i++) {
                                var poLen = steps[i].polyline.split(';');
                                for (var j = 0; j < poLen.length; j++) {
                                    points.push({
                                        longitude: parseFloat(poLen[j].split(',')[0]),
                                        latitude: parseFloat(poLen[j].split(',')[1])
                                    })
                                }
                            }
                            that.polyline = [{
                                points: points,
                                color: strategy === 10 ? '#0ee532' : strategy === 2 ? '#0742d9' :
                                    '#ee6b06',
                                width: 8,
                            }]
                        }
                        uni.hideLoading();
                    },
                    fail: function(info) { //失败回调
                        console.log('路线规划失败')
                        console.log(info)
                        uni.hideLoading();
                        uni.showToast({
                            title: '路线规划失败',
                            icon: 'error'
                        });
                    },
                })
            },
            // 点击标记点
            markertap(e) {
                let opt = this.markers.find(el => {
                    return el.id === e.detail.markerId
                })
                this.openChooseLocation(opt)
            },

            // 提交给司机
            submitToDriver() {
                let p = {}
                p.idCard = uni.getStorageSync('driverInfo').idCard || ''
                p.startLocation = this.startPoint.longitude + ',' + this.startPoint.latitude
                p.startAddr = this.startPoint.name || '未知'
                p.endLocation = this.endPoint.longitude + ',' + this.endPoint.latitude
                p.endAddr = this.endPoint.name || '未知'
                p.plan = this.flag || 10
                p.locations = this.polyline[0].points || []
                if (!p.idCard) {
                    return uni.showToast({
                        title: '司机信息获取失败',
                        icon: 'none'
                    });
                }
                uni.showLoading({
                    title: '提交中'
                });
                let that = this
                this.request('api_sendDestination', p).then(res => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '发送成功'
                    })
          setTimeout(()=>{
            that.toBack()
          },1000)

                }).catch(err => {
                    console.log(err)
                    uni.hideLoading();
                    uni.showToast({
                        title: '发送失败',
                        icon: 'error'
                    })
                })

            }

        },

    }
</script>
<style lang="scss" scoped>
    .content {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-content: center;
        background: #f5f5f9;
        height: 1600rpx;
    }

    .back-button {
        z-index: 9;
        position: fixed;
        top: 95rpx;
        left: 30rpx;
        height: 50rpx;
        width: 50rpx;
        border-radius: 50%;
        background-color: #FFA500;
        /* box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2); */
    }

    .order-map {
        width: 100%;
        height: 100%;
    }

    .order-box {
        position: fixed;
        bottom: 0rpx;
        left: 0rpx;
        width: 100%;
        //height: 435rpx;
        text-align: left;
        background-color: #FFFFFF;
        border-top-right-radius: 10rpx;
        border-top-left-radius: 10rpx;
        box-sizing: border-box;
        padding: 18rpx;
        padding-bottom: 80rpx;
        box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2);

        .send-btn {
            margin-top: 30rpx;
            width: 100%;
            color: white;
            background-color: #ffa602;
            padding: 0 24rpx;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            box-sizing: border-box;
            border-radius: 12rpx;
            text-align: center;
        }

        /*box-shadow: 0 9.375rpx 28.125rpx 9.375rpx rgba(106, 66, 0, 0.2);*/
        .search-start {
            font-size: 30rpx;
            margin: 18rpx 0;
            padding-left: 15rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;

            .start-name {
                width: 550rpx;
                padding-left: 10rpx;
                overflow: hidden;
                /*文本不会换行*/
                white-space: nowrap;
                /*当文本溢出包含元素时，以省略号表示超出的文本*/
                text-overflow: ellipsis;
            }

            .custom-style {
                margin-right: 10rpx;
                border-radius: 6rpx;
                border: 1rpx solid #ebedf0;
                font-size: 24rpx;
                padding: 8rpx 24rpx;

                &:last-child {
                    margin-right: 0;
                }

                &.active {
                    color: #FFFFFF;
                    background-color: #ffa602;
                    border-color: #ffa602;
                }
            }
        }

        .search-box {
            background-color: #f3f3f3;
            border-radius: 36rpx;
            height: 80rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding: 0 25rpx;

            .search-placeholder {
                font-size: 28rpx;
                color: #bbb9b9;
                padding-left: 15rpx;
            }
        }
    }

    .addH {
        height: 420rpx;
        /*+100*/
    }

    .row {
        display: flex;
        flex-direction: row;
    }

    .bot {
        margin-bottom: 10rpx;
    }

    .license {
        position: relative;
        left: 30rpx;
        height: 110rpx;
        font-weight: bold;
        font-size: 38rpx;
        line-height: 130rpx;
        letter-spacing: 1.125rpx;
        /* border: 0.01rem solid #555555; */
    }

    .time-icon {
        height: 16rpx;
        width: 16rpx;
        position: relative;
        left: 190rpx;
        top: 59rpx;
    }

    .time-text {
        height: 110rpx;
        line-height: 130rpx;
        position: relative;
        left: 200rpx;
        font-size: 30rpx;
        color: #666666;
        /* border: 0.01rem solid #555555; */
    }

    .route-icon {
        height: 12rpx;
        width: 12rpx;
        position: relative;
        left: 42rpx;
        top: 30rpx;
    }

    .route-text {
        height: 65rpx;
        width: 478rpx;
        line-height: 65rpx;
        position: relative;
        left: 50rpx;
        font-size: 30rpx;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* border: 0.01rem solid #555555; */
    }

    .amt-box {
        width: calc(100% - 558rpx);
        margin-left: 40rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        /* border: 1rpx solid #555555; */
    }

    .amt-icon {
        margin-top: 5rpx;
        line-height: 65rpx;
        height: 20rpx;
        width: 20rpx;
    }

    .amt {
        margin-left: 10rpx;
        line-height: 65rpx;

        /*line-height: 80rpx;*/
        font-size: 30rpx;
        color: #666666;
    }

    .todo {
        position: relative;
        height: 165rpx;
        width: 640rpx;
        margin-left: 30rpx;
        border-top: 0.375rpx solid #E9EAEC;
    }

    .todo-item {
        height: 100%;
        width: 50%;
        text-align: center;
        align-content: center;
        /* border: 0.01rem solid #555555; */
    }

    .todo-item>image {
        height: 60rpx;
        width: 60rpx;
        margin-top: 30rpx;
    }

    .todo-item>view {
        color: #3F3F3F;
        font-size: 30rpx;
        letter-spacing: 0.375rpx;
        /* border: 0.01rem solid #555555; */
    }
</style>

<style>
    /* *************************************** */
    .customCallout {
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 30px;
        padding: 5px 10px;
    }

    .customCalloutContent {
        font-size: 20rpx;
        word-wrap: break-word;

    }
</style>